<template>
    <div class="data-content" style="padding: 0;">
        <div v-if="jtRenYuanType == '0' || jtRenYuanType == '2'" style="padding-left: 20px">
            <!-- 施工-->
            <el-tabs v-model="renYuanInfoTabActiveName" type="card" @tab-click="renyuanInfoTab">
                <el-tab-pane label="职称信息" name="zhicheng">
                    <div v-if="jtRenYuanInfoTabData.rows.length > 0">
                        <div style="font-size: 15px;">
                            共查询到 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.countSize }}</span> 条数据，
                            当前第 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.curpage ? jtRenYuanInfoTabData.pageObj.curpage:'1' }}</span> 页，
                            共计 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.maxPage }}</span> 页
                            <el-button type="text" @click.stop="renyuanInfoPreviousPage(jtRenYuanInfoTabData.pageObj.curpage)"> 上一页</el-button>
                            <el-button type="text" @click.stop="renyuanInfoNextPage(jtRenYuanInfoTabData.pageObj.curpage)"> 下一页</el-button>
                        </div>
                        <table class="layui-table">
                            <colgroup>
                                <col width="60">
                                <col width="200">
                                <col width="120">
                                <col>
                                <col width="160">
                                <col width="160">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>职称</th>
                                <th>证书编号</th>
                                <th>职称专业</th>
                                <th>核发机关</th>
                                <th>核发日期</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in jtRenYuanInfoTabData.rows" :key="index">
                                <td>{{ (jtRenYuanInfoTabData.pageObj.curpage - 1) * 20 + index + 1 }}</td>
                                <td>{{ item.academicName }}</td>
                                <td>{{ item.academicID }}</td>
                                <td>{{ item.academicMajor }}</td>
                                <td>{{ item.acaIssueAuthority }}</td>
                                <td>{{ item.acaIssueDate }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div v-else style="font-size: 16px;">
                        未查询到数据
                    </div>
                </el-tab-pane>
                <el-tab-pane label="执业资格信息" name="zhiye">
                    <div v-if="jtRenYuanInfoTabData.rows.length > 0">
                        <div style="font-size: 15px;">
                            共查询到 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.countSize }}</span> 条数据，
                            当前第 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.curpage ? jtRenYuanInfoTabData.pageObj.curpage:'1' }}</span> 页，
                            共计 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.maxPage }}</span> 页
                            <el-button type="text" @click.stop="renyuanInfoPreviousPage(jtRenYuanInfoTabData.pageObj.curpage)"> 上一页</el-button>
                            <el-button type="text" @click.stop="renyuanInfoNextPage(jtRenYuanInfoTabData.pageObj.curpage)"> 下一页</el-button>
                        </div>
                        <table class="layui-table">
                            <colgroup>
                                <col width="60">
                                <col width="150">
                                <col width="120">
                                <col>
                                <col width="120">
                                <col width="120">
                                <col width="120">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>注册类别</th>
                                <th>注册等级</th>
                                <th>发证机关</th>
                                <th>证书编号</th>
                                <th>发证日期</th>
                                <th>注册有效期至</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in jtRenYuanInfoTabData.rows" :key="index">
                                <td>{{ (jtRenYuanInfoTabData.pageObj.curpage - 1) * 20 + index + 1 }}</td>
                                <td>{{ item.regTypeName }}</td>
                                <td>{{ item.regLevel }}</td>
                                <td>{{ item.issueAuthority }}</td>
                                <td>{{ item.regCANumber }}</td>
                                <td>{{ item.regAnnounceDate }}</td>
                                <td>{{ item.regValidityTerm }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div v-else style="font-size: 16px;">
                        未查询到数据
                    </div>
                </el-tab-pane>
                <el-tab-pane label="履历信息" name="lvli">
                    <div v-if="jtRenYuanInfoTabData.rows.length > 0">
                        <div style="font-size: 15px;">
                            共查询到 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.countSize }}</span> 条数据，
                            当前第 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.curpage ? jtRenYuanInfoTabData.pageObj.curpage:'1' }}</span> 页，
                            共计 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.maxPage }}</span> 页
                            <el-button type="text" @click.stop="renyuanInfoPreviousPage(jtRenYuanInfoTabData.pageObj.curpage)"> 上一页</el-button>
                            <el-button type="text" @click.stop="renyuanInfoNextPage(jtRenYuanInfoTabData.pageObj.curpage)"> 下一页</el-button>
                        </div>
                        <table class="layui-table">
                            <colgroup>
                                <col width="60">
                                <col width="150">
                                <col width="120">
                                <col>
                                <col width="120">
                                <col width="120">
                                <col width="120">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>姓名</th>
                                <th>公司名称</th>
                                <th>职务类型</th>
                                <th>职务</th>
                                <th>任职状态</th>
                                <th>入职时间</th>
                                <th>离职时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in jtRenYuanInfoTabData.rows" :key="index">
                                <td>{{ (jtRenYuanInfoTabData.pageObj.curpage - 1) * 20 + index + 1 }}</td>
                                <td>{{ item.personName }}</td>
                                <td>{{ item.corpName }}</td>
                                <td>{{ item.ddldutytype }}</td>
                                <td>{{ item.position }}</td>
                                <td>{{ item.workStatus }}</td>
                                <td>{{ item.workStartDate }}</td>
                                <td>{{ item.workEndDate }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div v-else style="font-size: 16px;">
                        未查询到数据
                    </div>
                </el-tab-pane>
                <el-tab-pane label="个人业绩" name="yeji">
                    <div v-if="jtRenYuanInfoTabData.rows.length > 0" style="font-size: 16px;">
                        <div style="font-size: 15px;">
                            共查询到 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.countSize }}</span> 条数据，
                            当前第 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.curpage ? jtRenYuanInfoTabData.pageObj.curpage:'1' }}</span> 页，
                            共计 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.maxPage }}</span> 页
                            <el-button type="text" @click.stop="renyuanInfoPreviousPage(jtRenYuanInfoTabData.pageObj.curpage)"> 上一页</el-button>
                            <el-button type="text" @click.stop="renyuanInfoNextPage(jtRenYuanInfoTabData.pageObj.curpage)"> 下一页</el-button>
                        </div>
                        <table class="layui-table">
                            <colgroup>
                                <col width="60">
                                <col width="150">
                                <col width="120">
                                <col>
                                <col width="120">
                                <col width="120">
                                <col width="120">
                                <col width="120">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>项目名称</th>
                                <th>标段名称</th>
                                <th>业绩所属单位</th>
                                <th>工作岗位</th>
                                <th>职务日期</th>
                                <th>在岗起始日期</th>
                                <th>在岗截止日期</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in jtRenYuanInfoTabData.rows" :key="index">
                                <td>{{ (jtRenYuanInfoTabData.pageObj.curpage - 1) * 20 + index + 1 }}</td>
                                <td>{{ item.projectName }}</td>
                                <td>{{ item.segmentName }}</td>
                                <td>{{ item.achievementCompany }}</td>
                                <td>{{ item.achievementPosition }}</td>
                                <td>{{ item.dutyDate }}</td>
                                <td>{{ item.achievementStartDate }}</td>
                                <td>{{ item.achievementEndDate }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div v-else style="font-size: 16px;">
                        未查询到数据
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-if="jtRenYuanType == '1'" style="padding-left: 20px">
            <!-- 监理人员-->
            <el-tabs v-model="renYuanInfoTabActiveName" type="card" @tab-click="renyuanInfoTab">
                <el-tab-pane label="人员详情" name="renyuaninfo">
                    <table class="layui-table">
                        <colgroup>
                            <col width="200">
                            <col width="200">
                            <col width="120">
                            <col>
                            <col width="160">
                            <col width="160">
                        </colgroup>
                        <tbody>
                        <tr>
                            <th>姓名</th>
                            <td>{{ jtRenYuanXQ.data.name }}</td>
                            <th rowspan="5">照片</th>
                            <td rowspan="5"><img style="width: 120px; height: 160px" :src="'http://glxy.mot.gov.cn:9000/mobile/pluginnew/Download.jsp?url=' + jtRenYuanXQ.data.picPath"/></td>
                        </tr>
                        <tr>
                            <th>民族</th>
                            <td>{{ jtRenYuanXQ.data.nation }}</td>
                        </tr>
                        <tr>
                            <th>学历</th>
                            <td>{{ jtRenYuanXQ.data.topEducation }}</td>
                        </tr>
                        <tr>
                            <th>毕业学院</th>
                            <td>{{ jtRenYuanXQ.data.topCollege }}</td>
                        </tr>
                        <tr>
                            <th>毕业专业</th>
                            <td>{{ jtRenYuanXQ.data.topMajor }}</td>
                        </tr>
                        <tr>
                            <th>从事专业</th>
                            <td>{{ jtRenYuanXQ.data.engagedInSpecialty }}</td>
                            <th>从事专业从事公路建设年限</th>
                            <td>{{ jtRenYuanXQ.data.engagedyears }}</td>
                        </tr>
                        <tr>
                            <th>技术职称</th>
                            <td>{{ jtRenYuanXQ.data.technicalTitle }}</td>
                            <th>职称专业</th>
                            <td>{{ jtRenYuanXQ.data.professionalTitle }}</td>
                        </tr>
                        <tr>
                            <th>职务</th>
                            <td>{{ jtRenYuanXQ.data.position }}</td>
                            <th>邮编</th>
                            <td>{{ jtRenYuanXQ.data.cityPost }}</td>
                        </tr>
                        <tr>
                            <th>通讯地址</th>
                            <td>{{ jtRenYuanXQ.data.address }}</td>
                            <th>企业名称</th>
                            <td>{{ jtRenYuanXQ.data.company }}</td>
                        </tr>
                        <tr>
                            <th>在本企业工作年限</th>
                            <td>{{ jtRenYuanXQ.data.companyYear }}</td>
                            <th>劳动现合同年限</th>
                            <td>{{ jtRenYuanXQ.data.labourYear }}</td>
                        </tr>
                        <tr>
                            <th>人事关系类别</th>
                            <td>{{ jtRenYuanXQ.data.personnelType }}</td>
                            <th>社会保险缴纳情况</th>
                            <td>{{ jtRenYuanXQ.data.soInPay }}</td>
                        </tr>
                        <tr>
                            <th>个人常驻地</th>
                            <td colspan="3" style="text-align: left;">{{ jtRenYuanXQ.data.oftenAddress }}</td>
                        </tr>
                        <tr>
                            <th>工作简历</th>
                            <td colspan="3">{{ jtRenYuanXQ.data.jobResume }}</td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="执业资格信息" name="zhiye">
                    <div v-if="jtRenYuanInfoTabData.rows.length > 0">
                        <div style="font-size: 15px;">
                            共查询到 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.countSize }}</span> 条数据，
                            当前第 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.curpage ? jtRenYuanInfoTabData.pageObj.curpage:'1' }}</span> 页，
                            共计 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.maxPage }}</span> 页
                            <el-button type="text" @click.stop="renyuanInfoPreviousPage(jtRenYuanInfoTabData.pageObj.curpage)"> 上一页</el-button>
                            <el-button type="text" @click.stop="renyuanInfoNextPage(jtRenYuanInfoTabData.pageObj.curpage)"> 下一页</el-button>
                        </div>
                        <table class="layui-table">
                            <colgroup>
                                <col width="60">
                                <col width="150">
                                <col width="120">
                                <col>
                                <col width="120">
                                <col width="120">
                                <col width="120">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>证书名称</th>
                                <th>注册类别</th>
                                <th>注册等级</th>
                                <th>注册证书号</th>
                                <th>状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in jtRenYuanInfoTabData.rows" :key="index">
                                <td>{{ (jtRenYuanInfoTabData.pageObj.curpage - 1) * 20 + index + 1 }}</td>
                                <td>{{ item.regName }}</td>
                                <td>{{ item.regTypeName }}</td>
                                <td>{{ item.regLevel }}</td>
                                <td>{{ item.regCANumber }}</td>
                                <td>{{ item.status }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div v-else style="font-size: 16px;">
                        未查询到数据
                    </div>
                </el-tab-pane>
                <el-tab-pane label="履历信息" name="lvli">
                    <div v-if="jtRenYuanInfoTabData.rows.length > 0">
                        <div style="font-size: 15px;">
                            共查询到 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.countSize }}</span> 条数据，
                            当前第 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.curpage ? jtRenYuanInfoTabData.pageObj.curpage:'1' }}</span> 页，
                            共计 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.maxPage }}</span> 页
                            <el-button type="text" @click.stop="renyuanInfoPreviousPage(jtRenYuanInfoTabData.pageObj.curpage)"> 上一页</el-button>
                            <el-button type="text" @click.stop="renyuanInfoNextPage(jtRenYuanInfoTabData.pageObj.curpage)"> 下一页</el-button>
                        </div>
                        <table class="layui-table">
                            <colgroup>
                                <col width="60">
                                <col width="150">
                                <col width="120">
                                <col>
                                <col width="120">
                                <col width="120">
                                <col width="120">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>公司名称</th>
                                <th>职位</th>
                                <th>任职状态</th>
                                <th>入职时间</th>
                                <th>离职时间</th>
                                <th>从业登记省站审核时间</th>
                                <th>从业注销省站审核时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in jtRenYuanInfoTabData.rows" :key="index">
                                <td>{{ (jtRenYuanInfoTabData.pageObj.curpage - 1) * 20 + index + 1 }}</td>
                                <td>{{ item.corpName }}</td>
                                <td>{{ item.position }}</td>
                                <td>{{ item.workStatus }}</td>
                                <td>{{ item.workStartDate }}</td>
                                <td>{{ item.workEndDate }}</td>
                                <td>{{ item.workStartProvinceDate }}</td>
                                <td>{{ item.workEndProvinceDate }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div v-else style="font-size: 16px;">
                        未查询到数据
                    </div>
                </el-tab-pane>
                <el-tab-pane label="个人业绩" name="yeji">
                    <div v-if="jtRenYuanInfoTabData.rows.length > 0" style="font-size: 16px;">
                        <div style="font-size: 15px;">
                            共查询到 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.countSize }}</span> 条数据，
                            当前第 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.curpage ? jtRenYuanInfoTabData.pageObj.curpage:'1' }}</span> 页，
                            共计 <span style="color: #1989fa;">{{ jtRenYuanInfoTabData.pageObj.maxPage }}</span> 页
                            <el-button type="text" @click.stop="renyuanInfoPreviousPage(jtRenYuanInfoTabData.pageObj.curpage)"> 上一页</el-button>
                            <el-button type="text" @click.stop="renyuanInfoNextPage(jtRenYuanInfoTabData.pageObj.curpage)"> 下一页</el-button>
                        </div>
                        <table class="layui-table">
                            <colgroup>
                                <col width="60">
                                <col width="150">
                                <col width="120">
                                <col>
                                <col width="120">
                                <col width="120">
                                <col width="120">
                                <col width="120">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>项目名称</th>
                                <th>标段名称</th>
                                <th>业绩所属单位</th>
                                <th>工作岗位</th>
                                <th>职务日期</th>
                                <th>在岗起始日期</th>
                                <th>在岗截止日期</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in jtRenYuanInfoTabData.rows" :key="index">
                                <td>{{ (jtRenYuanInfoTabData.pageObj.curpage - 1) * 20 + index + 1 }}</td>
                                <td>
                                    <span style="color: #1989fa" @click.stop="toJTProjectInfo(item.project_id, jiaotongComId)">{{ item.projectName }}</span>
                                </td>
                                <td>{{ item.segmentName }}</td>
                                <td>{{ item.achievementCompany }}</td>
                                <td>{{ item.achievementPosition }}</td>
                                <td>{{ item.dutyDate }}</td>
                                <td>{{ item.achievementStartDate }}</td>
                                <td>{{ item.achievementEndDate }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div v-else style="font-size: 16px;">
                        未查询到数据
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <!--业绩详情 弹窗-->
        <el-dialog title="业绩详情" :visible.sync="dialogjtProjectVisible">
            <yeji-info :corp-type="corpType" :project-id="projectId" :company-id="companyId"></yeji-info>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        jtRenYuanType: {
            type: Number,
            default: 0,
        },
        personId: {
            type: String,
            default: "",
        },
        personType: {
            type: String,
            default: "",
        },
        corpType: {
            type: String,
            default: "",
        },
    },
    data: () => ({
        // 人员详情弹窗默认标签
        renYuanInfoTabActiveName: '',
        jtRenYuanXQ: { data: {} },
        jtRenYuanInfoTabData: { rows: [] },
        // 监理人员列表tab
        renYuanJLActiveName: '4',
        projectId :'',
        companyId :'',
        dialogjtProjectVisible:false
    }),
    methods: {
        //弹窗列表 下一页+1
        renyuanInfoNextPage: function(pageNo){
            this.renyuanPageNo = pageNo + 1;
            this.getJTRenYuanInfoTab(this.renYuanInfoTabActiveName, pageNo);
        },
        //弹窗列表 上一页
        renyuanInfoPreviousPage: function(typeName, pageNo){
            if(pageNo > 1){
                this.renyuanPageNo = pageNo - 1;
            }else {
                this.renyuanPageNo = 1;
            }
            this.getJTRenYuanInfoTab(this.renYuanInfoTabActiveName, pageNo);
        },
        //人员相同弹窗标签页切换
        renyuanInfoTab(tab, event) {
            if(tab.name != 'renyuaninfo'){
                this.getJTRenYuanInfoTab(tab.name, 1);
            }
        },
        // 获取 交通 人员详情  tab页数据
        getJTRenYuanInfoTab: function (typeName, pageNo) {
            var personId = this.jtRenYuanXQ.data.id;
            var url = "";
            if ("zhicheng" == typeName) {
                this.jtRenYuanInfoTabName = "职称信息";
                url = "searchjiaotong/jiaotong/renyuanzhicheng";
            } else if ("zhiye" == typeName) {
                this.jtRenYuanInfoTabName = "执业资格信息";
                url = "searchjiaotong/jiaotong/renyuanzhiye";
            } else if ("lvli" == typeName) {
                this.jtRenYuanInfoTabName = "履历信息";
                url = "searchjiaotong/jiaotong/renyuanlvli";
            } else if ("yeji" == typeName) {
                this.jtRenYuanInfoTabName = "个人业绩";
                url = "searchjiaotong/jiaotong/renyuanyeji";
            }
            var that = this;
            this.$ajax({
                type: "get",
                url: `${this.$store.state.api.searchUrl}/${url}`,
                data: {
                    pageNo: pageNo,
                    pageSize: 20,
                    personId: personId,
                },
                callback: function (data, res) {
                    that.jtRenYuanInfoTabData = data;
                },
            });
        },
        //获取 交通 人员详情
        getJTRenYuanXQ: function (presonId, type) {
            this.jtRenYuanInfoTabName = "人员详情";
            var that = this;
            this.$ajax({
                type: "get",
                url: `${that.$store.state.api.searchUrl}/searchjiaotong/jiaotong/renyuaninfo`,
                data: {
                    personId: presonId,
                    type: type,
                },
                callback: function (data, res) {
                    that.jtRenYuanXQ = data;
                    that.getJTRenYuanInfoTab('zhicheng', 1);
                    if (that.corpType == "施工" || that.corpType == '勘察设计') {
                        that.renYuanInfoTabActiveName = 'zhicheng'
                    } else {
                        that.renYuanInfoTabActiveName = 'renyuaninfo'
                    }
                },
            });
        },
        toJTProjectInfo(projectId, companyId){
            this.projectId = projectId;
            this.companyId = companyId;
            this.dialogjtProjectVisible = true;
        },
    },
    mounted() {
        if (this.corpType == "施工" || this.corpType == '勘察设计') {
            this.renYuanInfoTabActiveName = 'zhicheng'
        } else {
            this.renYuanInfoTabActiveName = 'renyuaninfo'
        }
        this.getJTRenYuanXQ(this.personId, this.personType)
    },
    watch: {
        // 监听 addOrUpdateVisible 改变
        personId(oldVal, newVal) {
            if(oldVal != newVal){
                this.getJTRenYuanXQ(this.personId, this.personType)
            }
        },
    },
};
</script>

<style scoped lang="scss">
.data-content {
    .datas_tab {
        display: flex;
        float: none;
        margin-left: 8px;
        margin-bottom: 4px;
        .li {
            display: block;
            float: left;
            margin-left: 8px;
            font-size: 14px;
            height: 29px;
            line-height: 29px;
            padding: 0px 2px;
            cursor: pointer;
            .val{
               font-style: italic;
                color: #348bda;
            }
        }
        .active{
            color: #fff;
    background: #348bda;
    text-decoration: none;
        }
    }
    // border-bottom: 1px solid #efefef;
    padding: 20px 15px;
    .layui-table {
        width: 100%;
        border-collapse: collapse;
    }
    .layui-table td,
    .layui-table th {
        padding: 12px 10px;
        text-align: center;
        border: 1px solid #ddd;
        font-size: 15px;
    }
    .layui-table tr th {
        background: #f9f9f9;
        color: #333;
        position: inherit;
    }
}
</style>
